<template>
	<view class="bindCard">
		<navBar title="绑定银行卡" isBack backColor="#fff" color="#fff" background="#333333"></navBar>
		<view class="bindList" @click="toSelectType">
			<span>银行卡类型</span>
			<input type="text" disabled v-model="typeName" placeholder-class="bindC" placeholder="请选择银行卡类型" />
		</view>
		<view class="bindList" @click="toSelectCartType">
			<span>绑卡类型</span>
			<input type="text" disabled v-model="CartType" placeholder-class="bindC" placeholder="请选择绑卡类型" />
		</view>
		<view class="bindList">
			<span>银行卡号</span>
			<!-- <input type="text" v-model="bank_account"  placeholder-class="bindC" placeholder="请输入银行卡号" /> -->
			<input type="text" v-model="bank_account" @blur="GegBankName" placeholder-class="bindC" placeholder="请输入银行卡号" />
		</view>
		<view class="bindList">
			<span>银行名称</span>
			<input type="text" v-model="bank_name" placeholder-class="bindC" placeholder="请输入银行名称" />
		</view>
		<view class="bindList">
			<span>银行支行</span>
			<input type="text" v-model="bankBranchName" placeholder-class="bindC" placeholder="请输入支行名称" />
		</view>
		<view class="bindList">
			<span>手机号码</span>
			<input type="number" maxlength="11" @input="bindKeyInput" :value="mobile" placeholder-class="bindC" placeholder="请输入银行预留手机号码" />
		</view>
		<view class="bindList" v-if="CartTypeValue == 2">
			<span>开户行省份</span>
			<input type="text" v-model="bank_prov" placeholder-class="bindC" placeholder="请输入开户行省份" />
		</view>
		<view class="bindList" v-if="CartTypeValue == 2">
			<span>开户行地市</span>
			<input type="text" v-model="bank_city" placeholder-class="bindC" placeholder="请输入开户行地市" />
		</view>
		<view class="bindList" v-if="CartTypeValue == 2">
			<span>支付行号</span>
			<input type="text" v-model="bank_pay_code" placeholder-class="bindC" placeholder="请输入支付行号" />
		</view>
		<!-- <view class="bindList" style="padding-left: 60rpx;">
			<input type="text" value="" v-model="verification" placeholder-class="bindC" placeholder="请输入验证码" />
			<span class="BindPhone_send" v-if="disabled == false" @tap="GetVerificationCode">{{ sendTime }}</span>
			<span class="BindPhone_disabled" v-else>{{ sendTime }}</span>
		</view> -->
		<view class="btnReady">
			<view class="radio_big">
				<checkbox-group @change="checkboxChange"><checkbox v-model="checked" :checked="checked" /></checkbox-group>
				<view @click="checkedChange">
					我已阅读并同意
					<span @click.stop="agent">《用户授权协议》</span>
				</view>
			</view>
			<view class="nextBtn"><view class="Btn" @click="toSubmit">立即绑定</view></view>
		</view>
		<u-select v-model="showType" @confirm="confirm" :list="list"></u-select>
		<u-select v-model="showCartType" @confirm="CartTypeconfirm" :list="CartTypelist"></u-select>
	</view>
</template>

<script>
import navBar from '@/components/navBar/navBar.vue';
import URL from '@/config/url.js';
// import service_distri from '@/service/distri.js';
import Https from '@/service/verification.js';
var Rexphone = /^1[2|3|4|5|6|7|8|9]\d{9}$/;
export default {
	data() {
		return {
			baseImg: this.$static,
			// bankInfo: {
			// 	bank_id: null,
			// 	bank_name: '' //卡名称
			// },
			account_name: '',

			bank_zh_name: '',

			showType: false,
			showCartType: false,
			list: [
				{
					value: '1',
					label: '储蓄卡'
				},
				{
					value: '2',
					label: '信用卡'
				}
			],
			CartTypelist: [
				{
					value: '1',
					label: '个人银行卡'
				},
				{
					value: '2',
					label: '企业银行卡'
				}
			],
			level: null,
			bankImg: '',
			bankImg_id: null,

			sendTime: '发送验证码', //倒计时
			currentTime: 60,
			disabled: false,

			BinBackInfo: {},
			// BinBackInfo的信息
			// bankCode: "01020000"
			// bankName: "工商银行"
			// cardBin: "621226"
			// cardLenth: "19"
			// cardName: "牡丹卡普卡"
			// cardState: "1"
			// cardType: "1"
			// cardTypeLabel: "借记卡"
			getCodeBack: {},

			// bankCode: "01020000"
			// bankName: "工商银行"
			// bizUserId: "lkdev_1_999"
			// cardType: "1"
			// tranceNum: "957490258517"
			CartType: '',
			CartTypeValue: '',
			typeVale: '',
			typeName: '', //银行卡类型
			bank_account: '', //银行卡号
			bank_name: '', //卡名称
			bankBranchName: '', //支行名称
			mobile: '', //手机号
			verification: '', //验证码
			memberType: null, //会员类型(2企业会员,3个人会员)
			checked: false ,//协议多选框
			bank_prov:'',//开户行省份（企业银行卡）
			bank_city:'', //开户行地市（企业银行卡）
			bank_pay_code:'', //支付行号（企业银行卡）
		};
	},
	onLoad(options) {
		console.log(options);
		this.memberType = options.memberType;
	},
	methods: {
		agent() {
			uni.navigateTo({
				url: '/pages_login/pages/login/agreement/index'
			});
		},
		checkboxChange(e) {
			var that = this;
			that.checked = e.detail.value[0] == false ? true : e.detail.value[0] == undefined ? false : true;
			// console.log(that.checked);
		},
		// 绑定是银行卡
		toSubmit() {
			var that = this;
			if(that.CartTypeValue == 2){
				if(that.bank_prov == ''){
					uni.showToast({
						title: '请选输入开户行省份！',
						icon: 'none'
					});
					return;
				}
				if(that.bank_city == ''){
					uni.showToast({
						title: '请选输入开户行地市！',
						icon: 'none'
					});
					return;
				}
				if(that.bank_pay_code == ''){
					uni.showToast({
						title: '请选输入支付行号！',
						icon: 'none'
					});
					return;
				}
			}
			let params = {
				card_type: this.typeVale, //银行卡类型
				card_no: this.bank_account, //银行卡号
				bank_name: this.bank_name, //银行名称
				bank_branch_name: this.bankBranchName, //银行支行名称
				phone: this.mobile, //银行卡手机号
				sms_code: this.verification, //短信验证码
				// account_type: this.memberType == 2 ? 2 : 1, //银行卡类型(1个人,2企业)
				account_type: this.CartTypeValue, //绑卡类型(1个人,2企业)
				trance_num: this.getCodeBack.tranceNum, //流水号
				trans_date: '', //申请时间
				bank_code: this.getCodeBack.bankCode ,//银行代码
				bank_prov:this.bank_prov,
				bank_city:this.bank_city,
				bank_pay_code:this.bank_pay_code
			};
			var PhoneData = that.mobile;
			var VerificationData = that.verification;
			// that.VerificationData != '' &&
			if (that.typeName != '' && that.bank_account != '' && that.bankBranchName != '' && that.PhoneData != '' && Rexphone.test(PhoneData) && that.checked == true) {
				uni.showLoading({
					title: '正在绑定...'
				});
				Https.bindBankCard(params).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						uni.showToast({
							title: '绑定成功',
							icon: 'success',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 2200);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						});
					}
				});
				return;
			}

			// if (that.VerificationData == '') {
			// 	uni.showToast({
			// 		title: '请输入手机验证码！',
			// 		icon: 'none'
			// 	});
			// 	return;
			// }
			if (that.typeName == '') {
				uni.showToast({
					title: '请选择银行卡类型！',
					icon: 'none'
				});
				return;
			}
			if (that.bank_account == '') {
				uni.showToast({
					title: '请输入银行卡号！',
					icon: 'none'
				});
				return;
			}
			if (that.bankBranchName == '') {
				uni.showToast({
					title: '请输入银行支行！',
					icon: 'none'
				});
				return;
			}
			if (PhoneData == '') {
				uni.showToast({
					title: '请输入手机号码！',
					icon: 'none'
				});
				return;
			}
			if (!Rexphone.test(PhoneData)) {
				uni.showToast({
					title: '手机号码有误！',
					icon: 'none'
				});
				return;
			}
			if (that.checked == false) {
				uni.showToast({
					title: '请勾选下方协议!',
					icon: 'none'
				});
				return;
			}
		},
		// 验证只能输入数字
		validateNumber(val) {
			return val.replace(/\D/g, '');
			// return val%100 !== 0
		},
		// 手机号码的双向数据绑定只能输入数字
		bindKeyInput(e) {
			var that = this;
			let value = that.validateNumber(e.detail.value);
			that.mobile = value;
			return value;
		},
		// 获取验证码
		GetVerificationCode() {
			var that = this;
			var PhoneData = that.mobile;
			var VerificationData = that.verification;
			if (that.typeName == '') {
				uni.showToast({
					title: '请选择银行卡类型！',
					icon: 'none'
				});
				return;
			}
			if (that.bank_account == '') {
				uni.showToast({
					title: '请输入银行卡号！',
					icon: 'none'
				});
				return;
			}
			if (that.bankBranchName == '') {
				uni.showToast({
					title: '请输入银行支行！',
					icon: 'none'
				});
				return;
			}
			if (PhoneData == '') {
				uni.showToast({
					title: '请输入手机号码！',
					icon: 'none'
				});
				return;
			} else if (!Rexphone.test(PhoneData)) {
				uni.showToast({
					title: '手机号码有误！',
					icon: 'none'
				});
				return;
			} else {
				if (that.disabled == false) {
					let params = {
						card_no: that.bank_account,
						phone: that.mobile
					};
					console.log(params);
					Https.GetBindBankCard(params).then(res => {
						if (res.code == 1) {
							console.log(res.data);
							that.getCodeBack = res.data;
							that.GetCode();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});

					// 调取API
				} else {
					uni.showModal({
						title: '提示',
						content: that.sendTime,
						showCancel: false,
						confirmText: '确定',
						success: function(res) {
							if (res.confirm) {
							}
						}
					});
				}
			}
		},
		// 获取验证码的时间倒计时
		GetCode: function(options) {
			var that = this;
			var currentTime = that.currentTime;
			var interval = setInterval(function() {
				currentTime--;
				that.disabled = true;
				that.sendTime = currentTime + '秒后重发';
				if (currentTime <= 0) {
					clearInterval(interval);
					that.sendTime = '重新发送';
					that.currentTime = 60;
					that.disabled = false;
				}
			}, 1000);
		},
		GegBankName(e) {
			console.log(e);
			var that = this;
			var value = e.detail.value;
			let params = {
				card_no: value
			};
			if (value != '' && that.CartTypeValue == '2') {
				Https.GetBinName(params).then(res => {
					if (res.code == 1) {
						console.log(res.data);
						var data = res.data.cardBinInfo;
						that.bank_name = data.bankName; //卡名称
						that.BinBackInfo = data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		},
		toSelectCartType() {
			this.showCartType = true;
		},
		CartTypeconfirm(e) {
			console.log(e, '选择类型');
			this.CartType = e[0].label;
			this.CartTypeValue = e[0].value;
			// this.typeName = e[0].label;
			// this.typeVale = e[0].value;
		},
		// 选择卡类型
		toSelectType() {
			this.showType = true;
		},
		// 选择类型成功
		confirm(e) {
			// console.log(e, '选择类型');
			this.typeName = e[0].label;
			this.typeVale = e[0].value;
		},

		// 协议多选框
		checkedChange() {
			this.checked = !this.checked;
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}
checkbox .wx-checkbox-input {
	border-radius: 0 !important; /* 圆角 */
	width: 26rpx; /* 背景的宽 */
	height: 26rpx; /* 背景的高 */
}
.bindCard {
	padding-top: 40rpx;
	margin-bottom: 200rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.bindList {
		margin: 0 auto 24rpx;
		width: 702rpx;
		height: 114rpx;
		border-radius: 8rpx;
		background-color: #f6f7fb;
		display: flex;
		color: #333333;
		align-items: center;
		font: 400 28rpx/40rpx PingFang SC;
		span {
			font-weight: 550;
			width: 232rpx;
			border-right: 2rpx solid #e5deca;
			text-align: center;
			margin-right: 40rpx;
		}
		/deep/.bindC {
			color: #939393;
			font: 400 28rpx/40rpx PingFang SC;
		}
		input {
			flex: 1;
		}
		.BindPhone_send {
			border-left: 2rpx solid #e5deca;
			margin-left: 40rpx;
			border-right: none;
			margin-right: 0;
			font-size: 30rpx;
			font-weight: bold;
			color: #c3ab7c;
		}
		.BindPhone_disabled {
			border-left: 2rpx solid #e5deca;
			margin-left: 40rpx;
			border-right: none;
			margin-right: 0;
			font-size: 30rpx;
			font-weight: bold;
			color: #999999;
		}
	}
	.bankImg {
		background-color: #fff;
		width: 702rpx;
		border-radius: 16rpx;
		height: 350rpx;
		margin: 24rpx auto 0;
		position: relative;
		.delImg {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 10rpx;
			right: 10rpx;
		}
	}
	.notImg {
		display: flex;
		text-align: center;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
	.btnReady {
		width: 100%;
		background-color: #fff;
		position: fixed;
		display: flex;
		flex-direction: column;
		align-items: center;
		bottom: 0;
		z-index: 10;
		font: 400 24rpx/34rpx PingFang SC;
		.radio_big {
			// radio {
			// 	transform: scale(0.7);
			// }
			display: flex;
			align-items: center;
			color: #333333;
			span {
				color: #e9423e;
			}
		}
		.nextBtn {
			flex: 1;
			width: 100%;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.Btn {
				height: 84rpx;
				font: 400 30rpx/84rpx PingFang SC;
				background-color: #e5b35e;
				border-radius: 12rpx;
				color: #fff;
				margin: 32rpx;
				flex: 1;
				text-align: center;
				// width: 100%;
			}
		}
	}
}
</style>
